<template>
  <div class="planner-messages">
    <h2 class="header">策划师消息</h2>
    <div v-if="loading" class="loading-spinner">
      <i class="el-icon-loading"></i> 加载中...
    </div>
    <div v-else-if="error" class="error-message">
      <i class="el-icon-error"></i> {{ error }}
    </div>
    <div v-else>
      <ul v-if="proposals.length > 0" class="proposal-list">
        <li
          v-for="proposal in proposals"
          :key="proposal.marketingProposalId"
          class="proposal-item"
        >
          <div class="proposal-header">
            <h3 class="proposal-title">{{ proposal.marketingProposalName }}</h3>
            <span
              class="proposal-status"
              :class="{
                'status-approved': proposal.auditStatus === '已审核',
                'status-pending': proposal.auditStatus !== '已审核',
              }"
            >
              {{ proposal.auditStatus }}
            </span>
          </div>
          <div class="proposal-details">
            <p>
              <i class="el-icon-time"></i> 提交时间:
              {{ formatDate(proposal.submitTime) }}
            </p>
            <p>
              <i class="el-icon-document"></i> 审核结论:
              {{ proposal.auditResult || "未审核" }}
            </p>
            <p>
              <i class="el-icon-chat-line-round"></i> 审核意见:
              {{ proposal.auditFeedback || "无" }}
            </p>
          </div>
        </li>
      </ul>
      <div v-else class="no-data-message">
        <i class="el-icon-folder-opened"></i> 暂无已审核的营销企划书。
      </div>
    </div>
  </div>
</template>

<script>
import { listProposal } from "@/api/bpm/proposal"; // 导入营销企划书 API
import { getUserProfile } from "@/api/system/user"; // 导入用户 API

export default {
  name: "PlannerMessages",
  data() {
    return {
      loading: true, // 加载状态
      error: "", // 错误信息
      proposals: [], // 营销企划书列表
      plannerId: null, // 当前策划师 ID
    };
  },
  async created() {
    try {
      // 获取当前用户信息
      const userResponse = await getUserProfile();
      this.plannerId = userResponse.data.userId; // 假设 userId 是策划师的 ID

      // 获取策划师相关的已审核的营销企划书列表
      const proposalResponse = await listProposal({
        plannerUserId: this.plannerId, // 策划师 ID
        auditStatus: "已审核", // 审核状态
      });
      this.proposals = proposalResponse.rows;
    } catch (err) {
      this.error = "加载数据失败，请稍后重试。";
      console.error("加载数据失败:", err);
    } finally {
      this.loading = false;
    }
  },
  methods: {
    // 格式化日期
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleDateString();
    },
  },
};
</script>

<style scoped>
.planner-messages {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.header {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  text-align: center;
  margin-bottom: 20px;
}

.loading-spinner {
  text-align: center;
  font-size: 16px;
  color: #606266;
}

.loading-spinner i {
  margin-right: 8px;
}

.error-message {
  text-align: center;
  font-size: 16px;
  color: #f56c6c;
}

.error-message i {
  margin-right: 8px;
}

.proposal-list {
  list-style: none;
  padding: 0;
}

.proposal-item {
  background-color: #ffffff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.proposal-item:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
}

.proposal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.proposal-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin: 0;
}

.proposal-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

.status-approved {
  background-color: #e1f3d8;
  color: #67c23a;
}

.status-pending {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.proposal-details {
  font-size: 14px;
  color: #606266;
}

.proposal-details p {
  margin: 8px 0;
}

.proposal-details i {
  margin-right: 8px;
  color: #909399;
}

.no-data-message {
  text-align: center;
  font-size: 16px;
  color: #909399;
}

.no-data-message i {
  margin-right: 8px;
}
</style>
